# call as $(target).modelTooltip(*args)

# send 'up' or 'down' as second arg to set it upside or downside the target
# first arg is data to be displayed
# i have not included the arrow image yet
$.fn.modelTooltip = (data, up_down) ->
  tooltip = """
             <div id='model-tooltip'>
               this is a tooltip
             </div>
             """
  position = this.offset()
  position.top += this.height() if up_down is 'down'
  position.top -= this.height() if up_down is 'up' or not up_down
  tooltip = $ tooltip
  tooltip.empty().append(data) if data and data.length > 0
  tooltip.css({
    'position': 'absolute'
    'top': position.top
    'left': position.left
    'z-index': 20
    'background-color': 'black'
    'color': 'white'
    'padding': '10px 10px 10px 10px'
    'border-radius': '10px'
  })
  $('#model-tooltip').remove()
  $('body').append(tooltip)

  $(document).mouseup( (e) ->
    container = $("#model-tooltip")
    if !container.is(e.target) and container.has(e.target).length == 0
      container.hide()
  )


